<template>
    <div class="navlist">
        <el-container>
            <el-container height="100vh">
                <el-aside width="auto">
                    <Nav :userData='userData' @child-clicked="handleChildClick"></Nav>
                </el-aside>
                <el-main>
                    <Header :userData='userData' :navId="navid" style="position: sticky;top: 0;"></Header>
                    <component :is="getComponent" :userData="userData"></component>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import Nav from '../../components/Nav/index'
import Header from '@/components/header/index.vue'


export default {
    name: 'HomePage',
    components: {
        Nav,
        Header
    },
    data() {
        return {
            NavFlag: '-',
            userData: {},
            navid: ''
        };
    },
    computed: {
        getComponent() {
            switch (this.NavFlag) {
                case '-': return () => import('./home.vue');
                case '1-2': return () => import('@/pages/adminPage');
                case '3-4': return () => import('@/pages/userPage');
                case '3-5': return () => import('@/pages/SendOTP');
                case '6-7': return () => import('@/pages/caidan30');
                case '6-8': return () => import('@/pages/SubscriptionServicesPage');

                case '6-9': return () => import('@/pages/ColumnContent');
                case '21-23': return () => import('@/pages/SystemHomePage/setup.vue');
                case '21-25': return () => import('@/pages/SystemHomePage/logs.vue');
                case '6-10': return () => import('@/pages/researchReport/index.vue');
                case '6-11': return () => import('@/pages/coursePage');
                case '21-22': return () => import('@/pages/SystemHomePage');
                // case '97-98': return () => import('@/pages/languageFunction');
                case '12-13': return () => import('@/pages/stockPage');
                case '12-14': return () => import('@/pages/AdjustmentPage');
                case '12-15': return () => import('@/pages/crawlStocks');
                case '16-17': return () => import('@/pages/PaymentInformation');
                case '16-18': return () => import('@/pages/Orders');
                case '19-20': return () => import('@/pages/CrawlerInformationRecord');
                case '21-26': return () => import('@/pages/SystemHomePage/teacher.vue');


                case '3-24': return () => import('@/pages/subscriptionPage');
                default: return null;
            }

            // CASE '1-2': RETURN () => IMPORT('@/pages/adminPage');
            //     CASE '4': RETURN () => IMPORT('@/pages/userPage');
            //     CASE '5': RETURN () => IMPORT('@用户发送验证码页面 你没写，先空');
            //     CASE '7': RETURN () => IMPORT('@栏目列表');
            //     CASE '8': RETURN () => IMPORT('@套餐列表');
            //     CASE '9': RETURN () => IMPORT('@新闻列表');
            //     CASE '10': RETURN () => IMPORT('@文章列表');
            //     CASE '11': RETURN () => IMPORT('@课程列表');
            //     CASE '13': RETURN () => IMPORT('@股票列表');
            //     CASE '14': RETURN () => IMPORT('@Recent Adjustment 股票调整列表');
            //     CASE '15': RETURN () => IMPORT('@爬取的股票列表 你没写，先空'); 
            //     CASE '17': RETURN () => IMPORT('@支付记录 你没写，先空');
            //     CASE '18': RETURN () => IMPORT('@订单列表 你没写，先空');
            //       CASE '20': RETURN () => IMPORT('@爬虫记录 你没写，先空');
            //         CASE '22': RETURN () => IMPORT('@首页设置');
            //           CASE '23': RETURN () => IMPORT('@其他设置');
        }
    },
    created() {
        this.userData = JSON.parse(window.localStorage.getItem('user'))
    },
    mounted() {
    },

    methods: {
        handleChildClick(index) {
            this.NavFlag = index
            this.navid = index
            console.log(index, '导航');
        }
    },
};
</script>

<style lang="less" scoped>
.navlist {
    .el-header {
        padding: 0;
    }

    .el-footer {
        background-color: #0e183b;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 200px;
    }

    .el-main {
        background-color: #fff;
        color: #333;
    }

    body>.el-container {
        margin-bottom: 40px;
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }

    .el-card__body,
    .el-main {
        padding: 0 !important;
    }
}
</style>
<style>
.el-dialog__body {
    padding: 0 10px;
}
</style>